<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--<h2 :style="{key(css属性名): value(属性值)}">{{message}}</h2>-->
    <h2 :style="{color: colorValue, fontSize: fontsizeValue, backgroundColor: backColor}">{{message}}</h2>
    <h2 :style="getStyle()">{{message}}</h2>
</div>


<script src="../../js/vue.js"></script>

<script>
    const vue = new Vue({
        el: "#app",
        data: {
            message: "Hello vue,你好！",
            colorValue: "green",
            fontsizeValue: "100px",
            backColor: "blue"
        },
        methods: {
            getStyle: function(){
                return {color: this.colorValue, fontSize: this.fontsizeValue};
            }
        }
    });
</script>

</body>
</html>